<template>
  <div id="cont">
    <Row>
      <div
        class="user-box"
        style="text-align:center;padding:35px 0;width:400px"
      >
        <div>
          <img
            src="@/assets/images/default_icon.png"
            style="height:64px;width:64px"
          />
        </div>
        头像
        <div style="margin:20px 0;text-align:left ">
          <Form :label-width="150" ref="formValidate">
            <FormItem label="用户账号:" prop="oldPwd"
              >{{ form.loginName }}
            </FormItem>
            <FormItem label="用户昵称:" prop="pwd"
              ><Input
                class="input"
                placeholder="请输入昵称"
                type="text"
                v-model="form.actualName"
                width="100"
              />
            </FormItem>
            <!-- <FormItem label="用户Email:" prop="pwdAgain">
              {{ data.email }}</FormItem
            > -->

            <FormItem label="密码：" prop="oldPwd">
              <Input
                class="input"
                placeholder="请输入原密码"
                password
                type="password"
                v-model="formValidate.oldPwd"
                width="100"
              />
            </FormItem>
            <FormItem label="新密码：" prop="pwd">
              <Input
                class="input"
                placeholder="请输入新密码"
                type="password"
                v-model="formValidate.pwd"
                width="100"
                password
              />
            </FormItem>
            <FormItem label="确认密码：" prop="pwdAgain">
              <Input
                class="input"
                placeholder="请再次输入新密码"
                type="password"
                password
                v-model="formValidate.pwdAgain"
                width="100"
              />
            </FormItem>
          </Form>
          <div>
            <Button
              type="primary"
              style="width:60%;margin-left:20%;margin:90px"
              @click="editSure"
              >确认保存</Button
            >
          </div>
        </div>
      </div>
    </Row>
  </div>
</template>

<script>
import { loginApi } from "@/api/login";
import cookie from "@/lib/cookie";
import { employeeApi } from "@/api/employee";
export default {
  name: "Home",
  components: {},
  props: {},
  data() {
    return {
      data: {
        loginName: "",
        actualName: "",
        email: ""
      },
      form: {
        loginName: "",
        actualName: "",
        email: ""
      },
      formValidate: {
        oldPwd: "",
        pwd: "",
        pwdAgain: ""
      },
      ruleValidate: {
        oldPwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        pwd: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur"
          }
        ],
        pwdAgain: [
          {
            required: true,
            message: "请输入确认密码",
            trigger: "blur"
          }
        ]
      },
      myUserId: null
    };
  },
  computed: {},
  watch: {},
  filters: {},
  created() {
    this.myUserId = this.$store.state.user.userLoginInfo.id;
  },
  mounted() {
    this.getSessioon();
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  methods: {
    async getSessioon() {
      let reslut = await loginApi.getSession();
      this.form = reslut.data;
      (this.data = {
        loginName: this.form.loginName,
        actualName: this.form.actualName,
        email: this.form.email
      }),
        console.log(this.form);
    },
    // 修改成员
    async updateEmployee() {
      try {
        this.isShowLoading = true;
        let result = await employeeApi.updateEmployee(this.form);
        this.$Message.success("修改成功");
        this.$refs["formValidate"].resetFields();
        this.getSessioon();
      } catch (e) {
        //TODO zhuoda sentry
        console.error(e);
      } finally {
        this.isShowLoading = false;
      }
    },
    logout() {
      this.$Spin.show();
      let token = cookie.getToken();
      localStorage.clear();
      cookie.clearToken();

      loginApi.logout(token);
      location.reload();
    },
    updatePassword() {
      this.editModal = true;
    },
    handleClick(name) {
      switch (name) {
        case "logout":
          this.logout();
          break;
        case "updatePassword":
          this.updatePassword();
          break;
      }
    },
    async savePassword() {
      this.$Spin.show();
      let result = await employeeApi.updatePwd(this.formValidate);
      this.$Message.success("修改密码成功");
      this.$refs["formValidate"].resetFields();
      this.editModal = false;
      this.logout();
    },
    editSure() {
      console.log(111);
      if (!this.form.actualName) {
        return this.$Message.error("昵称不能为空！！");
      }
      if (this.formValidate.pwd) {
        this.$refs["formValidate"].validate(valid => {
          if (valid) {
            if (this.formValidate.pwdAgain !== this.formValidate.pwd) {
              return this.$Message.error("两次输入密码不一致，请重新输入！！");
            }
            this.form.loginPwd = this.formValidate.pwd;
            this.form.oldPwd = this.formValidate.oldPwd;
            this.updateEmployee();
          }
        });
      } else {
        this.updateEmployee();
      }
    }
  }
};
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
.input {
  width: 180px;
}
</style>
<style>
#cont {
  background-color: #fff;
  padding: 30px 30px 0 30px;
}

.user-box .ivu-form-item {
  margin-bottom: 10px;
}
</style>
